<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	
		
		<div id="app">
			<cat-component></cat-component>
			<dog-component></dog-component>
			<hr >
			<h3>组件嵌套</h3>
			<qiantao-component></qiantao-component>
		</div> 
		
		
		<template id="catTemplate">
			<div>
				{{catname}}
			</div>
		</template>
		
		<template id="dogTemplate">
			<div>
				{{dogname}}
			</div>
		</template>
	
	<template id="homeTemplate">
		<div>
			{{homename}}
			<!-- 
			 2、组件嵌套：
			 
			 第二步：在组件的teamplate中添加其他组件的标签
			 
			 -->
			<cat-component></cat-component>
			<dog-component></dog-component>
		</div>
	</template>
		
	
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			//定义局部组件home
			let catComponent = {
				data: function(){
					return{
						catname: "我是一只猫"
					}
				},
				template: "#catTemplate",
				methods:{}
			}
			
			//定义局部组件狗
			let dogComponent = {
				data: function(){
					return{
						dogname: "我是哈士奇"
					}
				},
				template: "#dogTemplate",
				methods: {}
			}
			
			//定义组件嵌套
			let qiantaoComponent = {
				data: function(){
					return{
						homename: "我是宠物园"
					}
				},
				template: "#homeTemplate",
				methods:{},
				//1、是先组件嵌套：第一步，在组件这种使用Component添加其他的组件
				components:{
					catComponent,
					dogComponent
				}
			}
			
			const vue = new Vue({
				el: "#app",
				data: {},
				methods: {},
				mounted() {
					
				},
				components:{
					catComponent,
					dogComponent,
					qiantaoComponent
				}
			})
		</script>
		 
	</body>
</html>
